<template>
  <div class="register-form">
    <div class="register-form-info">
      <div class="info-box">
        <div class="info-text">&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</div>
        <div class="info-input"><input type="text" v-model="name" placeholder="请填写你的真实姓名"></div>
      </div>
      <div class="info-box">
        <div class="info-text">&nbsp;电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</div>
        <div class="info-input"><input type="text" v-model="phone" placeholder="请输入电话"></div>
      </div>
      <div class="info-box">
        <div class="info-text">&nbsp;微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信:</div>
        <div class="info-input"><input type="text" v-model="wechat" placeholder="请填写你的微信"></div>
      </div>
      <div class="activity-payment">
        <div class="activity-payment-text">活动费用:</div>
        <div class="activity-payment-money">￥{{cost}}</div>
      </div>
      <div class="activity-payment">
        <div class="activity-payment-text">支付方式:</div>
        <!-- <div v-if="radioFlag" class="activity-payment-money">
          <radio-group class="radio-group" @change="radioChange">
            <label class="radio" v-for="(item,index) in radioData" :key="index" >
              <radio :value="item.value" :checked="item.checked" color="#2aa7e1" />
              <span>{{item.name}}</span>
            </label>
          </radio-group>
        </div> -->
        <!-- <div v-else class="activity-payment-money">
          线上
        </div> -->
        <div class="activity-payment-money">
          <radio :checked="true" color="#2aa7e1" />
          <span>线下</span>
        </div>
      </div>
      <div class="activity-fellow" v-if="isGuest == 1">
        <div class="activity-fellow-text">&nbsp;&nbsp;&nbsp;是否有陪同客人:</div>
        <div class="activity-fellow-yes">
          <checkbox-group @change="checkboxChange">
            <checkbox class="radio" color="rgb(110, 189, 235)" :checked="isShowFellow"/>
          </checkbox-group>
        </div>
      </div>
      <div class="activity-fellow-content" v-if="isShowFellow">
        <div class="activity-fellow">
          <div class="activity-fellow-text">每位客人费用:</div>
          <div class="activity-fellow-money">￥{{guestCost}}</div>
        </div>
        <div class="activity-fellow-info" v-for="(item,index) in fellowInfo" :key="index">
          <div class="info-box">
            <div class="info-text">&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</div>
            <div class="info-input"><input v-model="item.name" type="text" placeholder="请填写你的真实姓名"></div>
          </div>
          <div class="info-box">
            <div class="info-text">&nbsp;电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</div>
            <div class="info-input"><input v-model="item.phone" type="text" placeholder="请输入电话"></div>
          </div>
          <div class="info-box">
            <div class="info-text">&nbsp;职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:</div>
            <div class="info-input"><input v-model="item.position" type="text" placeholder="请填写你的微信"></div>
          </div>
        </div>
        <div class="add-fellow-info" @click="addFellow">添加客人信息</div>
      </div>
    </div>
    <div class="register-form-btn" @click="subimitBtn">提交</div>
    <web-view src='https://tengxiansh.dindong.cn/get-offline-pay-content' v-if="webView" />
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  data(){
    return{
      activityID:'',
      cost:'',
      guestCost:'',
      isGuest:'',
      isShowFellow:false,
      name:'',
      phone:'',
      wechat:'',
      fellowInfo:[{name:"", phone:"", position:""}],
      orderNum: '',
      userToken: '',
      radioData:[{name:'线上',value:'online',checked:true},{name:'线下',value:'offline'}],
      radioFlag:false,//能否选择支付方式
      payType:'online',//默认线上支付
      webView: false,
    }
  },
  computed:{
    ...mapState(['userInfo']),
  },
  watch: {
    userInfo(nval){
      if(nval.user_vip.is_vip == 1){
        this.radioFlag=true;
        this.payType='online';
      }else{
        this.radioFlag=false
      }

    }
  },
  onLoad(option) {
    this.activityID = option.id;
    this.cost = option.cost;
    this.guestCost = option.guest_cost;
    this.isGuest = option.is_guest;
  },
  onShow(){
    this.init()
  },
  methods:{
    init(){
      this.payType='online';
      this.name = '';
      this.phone = '';
      this.wechat = '';
      this.fellowInfo = [{name:"", phone:"", position:""}];
      this.orderNum = '';
      this.userToken = '';
      this.isShowFellow=false;
    },
    checkboxChange: function(e) {
      this.isShowFellow = !this.isShowFellow;
    },
    addFellow(){
      this.fellowInfo.push({name:"", phone:"", position:""});
    },
    //创建活动订单
    async reqbuildOrder(){
      this.userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: this.userToken,
        activity_id: this.activityID,
        real_name: this.name,
        phone: this.phone,
        wechat: this.wechat,
        is_guest: this.isShowFellow ? 1 : 0,
        guest_info: this.isShowFellow ? this.fellowInfo : [],
      };
      let res = await this.$api.postbuildOrder(params);
      if(res.data.level == "success"){
        this.orderNum = res.data.data.order_num;
        this.reqWeChatPayment();
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //向后端发起支付请求
    async reqWeChatPayment(){
      let params = {
        user_token: this.userToken,
        order_num: this.orderNum
      }
      let res = await this.$api.postWeChatPayment(params);
      if(res.data.level == 'success'){
        var This = this;
        let data = res.data.data;
        wx.requestPayment({
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: 'MD5',
          paySign: data.paySign,
          success(res){
            wx.redirectTo({
              url: '/pages/activityMain/activityDetails/main?id=' + This.activityID
            })
            wx.showToast({
              title: "报名成功",
              icon: 'none',
              duration: 1000
            })
          },
          fail(res){
            wx.showToast({
              title: "支付失败",
              icon: 'none',
              duration: 1000
            })
          }
        })
      } else {
        wx.showToast({
          title: "支付失败",
          icon: 'none',
          duration: 1000
        })
      }
    },
    subimitBtn(){
      // if(this.payType=='online'){
      //   this.reqbuildOrder();
      // }else{
        this.activitySignUpOffline();//线下支付
      // }
    },
    radioChange(e){
      //改变支付方式
      const list=this.radioData;
      const newList= list.map(val=>{
        let obj={};
        if(val.value==e.target.value){
          obj.checked=true;
          obj.name=val.name;
          obj.value=val.value;
        }else{
          obj.checked=false;
          obj.name=val.name;
          obj.value=val.value;
        }
        return obj
      })
      this.radioData=newList;
      this.payType=e.target.value
    },
    async activitySignUpOffline(){
      //线下支付
      this.userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: this.userToken,
        activity_id: this.activityID,
        real_name: this.name,
        phone: this.phone,
        wechat: this.wechat,
        is_guest: this.isShowFellow ? 1 : 0,
        guest_info: this.isShowFellow ? this.fellowInfo : [],
      };
      let res = await this.$api.activitySignUpOffline(params);
      if(res.data.level=='success'){
        //线下支付
        this.webView = true;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .register-form{
    width: 100%;
    min-height: 100vh;
    background-color: #f1f1f1;
    padding-top: 20rpx;
    padding-bottom: 85rpx;
    .register-form-info{
      width: 100%;
      background-color: #fff;
      .info-box{
        border: 1px solid #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding: 10rpx;
        .info-text{
          flex: 1;
          text-align: center;
        }
        .info-input{
          flex: 2;
        }
      }
      .activity-payment,
      .activity-fellow{
        border: 1px solid #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding: 20rpx;
        .activity-payment-text,
        .activity-fellow-text{
          flex: 1;
          text-align: center;
        }
        .activity-payment-money,
        .activity-fellow-yes{
          flex: 2;
          .radio{
            margin-left: 20rpx;
          }
        }
      }
      .activity-fellow-content{
        padding: 0 10rpx 10rpx;
        .activity-fellow{
          border: none;
          .activity-fellow-text{
            flex: 3;
            text-align: center;
          }
          .activity-fellow-money{
            flex: 5;
          }
        }
        .activity-fellow-info{
          border: 1px rgb(110, 189, 235) solid;
          border-radius: 6px;
          margin-bottom: 20rpx;
          .info-box{
            border: none;
          }
        }
        .add-fellow-info{
          width: 300rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          background-color: rgb(110, 189, 235);
          margin: 0 auto;
          color: #fff;
          font-size: 28rpx;
          border-radius: 4px;
        }
      }
    }
    .register-form-btn{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: rgb(110, 189, 235);
      color: #fff;
      font-size: 14px;
      :active{
        background-color: rgb(6, 127, 240);
      }
      z-index: 9999
    }
  }
  .radio{
    margin-right: 20px;
  }
</style>
